<template>
  <div class="vh-100 bg-light p-4">
    <!-- 广告拦截提示栏 -->
    <div class="bg-pink text-white rounded-3 p-4 mb-4">
      <h2 class="fs-2 fw-bold mb-2">AdBlocker Detected !</h2>
      <p class="fs-6 lh-base">Please disable adblocker as it may cause issues with displaying and crediting offers. Reload this page once disabled.</p>
    </div>

    <!-- 统计卡片模块 -->
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 align-items-start">
      <!-- 积分卡片 -->
      <div class="w-1/4 bg-white rounded-3 shadow p-4 h-100">
        <h3 class="text-2xl font-bold text-gray-900">25</h3>
        <p class="text-sm text-gray-500 mb-4">Current Points</p>
        <div class="h-2 bg-gradient rounded-1" style="background: linear-gradient(to right, #4299e1, #3182ce);"></div>
      </div>


      <!-- 收益卡片 -->
      <div class="w-1/4 bg-white rounded-3 shadow p-4 h-100">
        <h3 class="text-2xl font-bold text-gray-900">0</h3>
        <p class="text-sm text-gray-500 mb-4">Earned Rewards</p>
        <div class="h-2 bg-gradient rounded-1" style="background: linear-gradient(to right, #4299e1, #3182ce);"></div>
      </div>

      <!-- 兑换卡片 -->
      <div class="w-1/4 bg-white rounded-3 shadow p-4 h-100">
        <h3 class="text-2xl font-bold text-gray-900">12</h3>
        <p class="text-sm text-gray-500 mb-4">Redeemed Points</p>
        <div class="h-2 bg-gradient rounded-1" style="background: linear-gradient(to right, #ed64a6, #d53f8c);"></div>
      </div>

      <!-- 推荐卡片 -->
      <div class="w-1/4 bg-white rounded-3 shadow p-4 h-100">
        <h3 class="text-2xl font-bold text-gray-900">5</h3>
        <p class="text-sm text-gray-500 mb-4">Referred Members</p>
        <div class="h-2 bg-gradient rounded-1" style="background: linear-gradient(to right, #f6e05e, #ecc94b);"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate((to, from) => {
  // 重新加载数据的逻辑
})
onMounted(() => {
  console.log('Dashboard.vue mounted')
})
</script>